<template>
  <div>
      我是菜单{{id}}
  </div>
</template>

<script>
export default {
  data(){
    return{
      id:this.$route.params.id
    }
  },
  // 第一种方法：我们可以监听$route
  watch:{
    $route(to,from){
      this.id = to.params.id
    }
  },
  // 第二种方法
  // beforeRouteUpdate(to,from){
  //   this.id = to.params.id
  // },
  created(){
    // 这时候我们会发现 list组件复用并为初始化重新加载 路由中的参数变化了 但是组件并未重新加载
    console.log('created');
  }
}
</script>

<style>

</style>